Jquery mobile and Google maps [on hold]

Posted by Jack on Programmers See other posts from Programmers or by Jack
Published on 2013-10-30T20:26:18Z Indexed on 2013/10/30 22:16 UTC
Read the original article Hit count: 197

Filed under:
|

I have been trying to get my google maps to display within a page of a mobile app. The map will display for a second, and then disappear. I have read about a jquery bug, but i can't seem to find a way to get this code to work. any help would be greatly appreciated.

        <script>
        var geocoder;
        var currentLocation;
        var searchResults;

        var map;
        var directionsDisplay;
        var directionsService;
        function init(){
            geocoder = new google.maps.Geocoder();
            if (navigator.geolocation){
                navigator.geolocation.watchPosition(showLocation, locationError);
            }
            else {
                alert("Geolocation not supported on this device");
                return;
            }                   
        }//init function

        function showLocation(location){//start showlocation

            currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
            $('#lat').attr("value", currentLocation.lat());
            $('#lng').attr("value", currentLocation.lng());


            geocoder = new google.maps.Geocoder();

            geocoder.geocode({'latLng': currentLocation}, function(results, status){
                if (status == google.maps.GeocoderStatus.OK){
                    if (results[0]){
                        var address = results[0].formatted_address;
                        $('#loc').html(results[0].formatted_address);

                        var info = "Latitude: " + location.coords.latitude + " Longitude: " + location.coords.longitude + "<br />";
                        info += "Location accurate within " + location.coords.accuracy + " meters <br /> Last Update: " + new Date(location.timestamp).toLocaleString();
                        $('#acc').html(info);
                        $('#address').attr("value", results[0].formatted_address);
                    }else{
                        alert('No results found');
                    }//end else
                     //if(!map) initMap();
                }else {
                    $('#loc').html('Geocoder failed due to: ' + status);
                }//end else
            });//end of function
            if (!map) initMap();                
        }//end showlocation function


         function locationError(error){
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    alert("Geolocation access denied or disabled. To enable geolocation on your iPhone, go to Settings > General> Location Services");
                    break;

                case error.POSITION_UNAVAILABLE:
                    alert("Current location not available");
                    break;

                case error.TIMEOUT:
                    alert("Timeout");
                    break;

                default:
                    alert("unkown error");
                    break;


            }//endswitch
        }//endlocationerror

        function initMap(){         

            var mapOptions = {
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: currentLocation
            };//var mapOptions
            map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions);

            google.maps.event.trigger(map, 'resize');

            var bounds = new google.maps.LatLngBounds();
            bounds.extend(currentLocation);

            map.fitBounds(bounds);
            //new code
            //var center;
            //function calculateCenter(){
                //center = map.getCenter();
            //}
            //google.maps.even.addDomListener(map, 'idle', function(){
                //calculateCenter();
            //});
            //google.maps.even.addListenerOnce(map, 'idle', function(){
                //google.maps.even.trigger(map,'resize');
            //});
            //google.maps.event.addDomListener(window, 'resize', function() {

            //map.setCenter(center);

            //});//end new code
        }//end initMap()

//-------------------------------------------------------------------------------
$(document).on("pageinit", init);

© Programmers or respective owner

Related posts about jQuery

Related posts about google